<style>
    body{
        background-color: #fff;
    }
      li{
               height: 60px;
               margin-bottom: 25px;
               list-style-type: none;
               width: 80px;
               float: left;
        }

    </style>


  <div>
        <div class="tab-content">

                <div role="tabpanel" class="tab-pane active" >

                       {% for row in trackRows %}
                             <li  style="cursor:pointer;text-align:center;" id="{{row['iId']}}"  url="{{row['vUrl']}}"  title="{{row['sName']}}"  openmode="{{row['iOpenMode']}}">
                             <p> <img src="{{ row['sLogo'] }}" style="width:32px;height:32px;"></p>
                             <a>{{ row['sName'] }}</a>
                             </li>
                      {% endfor %}

                 </div>

         </div>
</div>
<script type="text/javascript" src="/assets/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/assets/xh/xhTop.js?ver=1541490928"></script>
<script>
$("div li").click(function() {
        var openmode = $(this).attr('openmode');
        var url = $(this).attr('url');
        var title=$(this).attr('title');
        if(openmode=='1'){

            window.top.xhTop.showModal({
                          title:title,
                          content: '<iframe src="'+url+'"  style="width: 100%;;border-style: none;padding: 0px;height:520px"  scrolling="yes"   ></iframe>',
          });
        }
        else{
            window.top.xhTop.createNewTab(title,url);
        }

        });
</script>